<template>
  <div class="flex-container" ref="tag">
      <span v-if="isAll && multi"  v-bind:class="countClass"  v-on:click="doSelect"  data-tag-value="全部">全选</span>
      <span class="flex-item unSelect"  v-on:click="doSelect"  :data-tag-value="item.value" v-for="item in data">{{item.label}}</span>
  </div>
</template>
<script>
const tagCom = {
  name: "tagCom",
  componentName: "tagCom",
  model: {
    prop: "value",
    event: "select"
  },
  props: {
    data: Array,
    isAll: {
      type: Boolean,
      default: false
    },
    multi: {
      type: Boolean,
      default: false
    },
    value: {
      validator: function(value) {
        return true;
      }
    }
  },
  computed: {},
  data: function() {
    return {
      selectedClass: "flex-item selected",
      unSelectClass: "flex-item unSelect",
      selectAllTag: false,
      allValue: "全部",
      checkedValue: this.value
    };
  },
  methods: {
    doSelect: function(obj) {
      //只可单选
      if (!this.$props.multi) {
        var tagNodes = obj.target.parentNode.children;
        for (var i = 0; i < tagNodes.length; i++) {
          tagNodes[i].className = this.$data.unSelectClass;
        }
        obj.target.className =
          obj.target.className == this.$data.selectedClass
            ? this.$data.unSelectClass
            : this.$data.selectedClass;
        this.$emit("select", obj.target.dataset.tagValue);
        return;
      }

      //处理全部节点
      if (obj.target.dataset.tagValue == this.$data.allValue) {
        this.$data.checkedValue = [];
        var tagNodes = obj.target.parentNode.children;
        // 已选中全部
        if (obj.target.className == this.$data.unSelectClass) {
          this.$data.checkedValue = [];
          for (var i = 0; i < this.$props.data.length; i++) {
            this.$data.checkedValue.push(this.$props.data[i].value);
          }

          for (var i = 0; i < tagNodes.length; i++) {
            tagNodes[i].className = this.$data.selectedClass;
          }
        } else {
          //已取消全部
          this.$data.checkedValue = [];
          for (var i = 0; i < tagNodes.length; i++) {
            tagNodes[i].className = this.$data.unSelectClass;
          }
        }
      } else {
        //普通节点
        this.$data.selectAllTag = false;
        var valArray = this.$data.checkedValue;
        // 如果当前节点为选中状态
        if (obj.target.className == this.$data.selectedClass) {
          valArray = valArray.filter(t => t !== obj.target.dataset.tagValue); //从数组中移除数据
        } else {
          var item = valArray.find(t => t === obj.target.dataset.tagValue);
          if (item == null || item == undefined) {
            valArray.push(obj.target.dataset.tagValue);
          }
        }
        this.$data.checkedValue = valArray;
        //取消全选节点的样式
        var fTag = obj.target.parentNode.children[0];
        if (fTag != undefined && fTag.dataset.tagValue == this.$data.allValue) {
          fTag.className = this.$data.unSelectClass;
        }
        obj.target.className =
          obj.target.className == this.$data.selectedClass
            ? this.$data.unSelectClass
            : this.$data.selectedClass;
      }

      // 触发选择事件
      this.$emit("select", this.$data.checkedValue);
      // 标准样式切换
    },

    // 初始化
    tagInit: function() {
      var tagNodes = this.$refs.tag.children;
      for (var i = 0; i < tagNodes.length; i++) {
        var tagNode = tagNodes[i];
        //存在Data
        if (this.$props.value instanceof Array) {
          var item = this.$props.value.find(
            t => t === tagNode.dataset.tagValue
          );
          if (item == tagNode.dataset.tagValue) {
            tagNode.className = this.$data.selectedClass;
          } else {
            tagNode.className = this.$data.unSelectClass;
          }
        } else {
          if (this.$props.value == tagNode.dataset.tagValue) {
            tagNode.className = this.$data.selectedClass;
          } else {
            tagNode.className = this.$data.unSelectClass;
          }
        }
      }
    }
  },
  created() {},
  mounted() {
    this.tagInit();
  },
  watch: {
    value: function(val) {
      console.log(val);
      this.tagInit();
    }
  }
};
export default tagCom;
</script>

<style>
.flex-container {
  display: -webkit-inline-block;
  display: inline-block;
  padding: 2px;
  background-color: transparent;
}

.flex-item {
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
  height: 25px;
  line-height: 25px;
  display: inline-block;
  margin: 2px;
  font-family: "Microsoft YaHei";
  color: #5a5e66;
  text-align: center;
}
.unSelect {
  background-color: #b4bccc;
}
.selected {
  background-color: #fa5555;
  color: #fbfbfb;
}
</style>
